<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>测试</title>
        <style type="text/css">
           
        </style>
    </head>
<body>
    <!-- 
        使用form创建表单
            常用的属性：
                action：资源路径，指向要提交的服务器的地址
                method：数据的提交方式，比如get、post
                target：当前表单的跳转目标
     -->
    <form action="" method="get">
        <!-- 
            创建文本框
                type属性：文本框为text
                name属性：指定提交的内容的名字，服务器根据该名字获取提交的数据
                value属性：指定文本框的默认内容
        -->
        用户名：<input type="text" name="username" value="我是默认内容"> <br><br>
        <!-- 
            创建密码框
                type属性：密码框为password
         -->
        密码：<input type="password" name="password" > <br><br>
        <!-- 
            创建单选框
                type属性：单选框为radio
                name属性：对单选框进行分组，name相同的是同一组
                value属性：value属性值会被提交给服务器
            
         -->
         性别： <input type="radio" name="gender"  value="1" > 男
                <!-- 单选框中默认选中某个，需要添加checked="checked" -->
                <input type="radio" name="gender" value="0" checked="checked"> 女
                <br><br>
        <!-- 
            创建多选框
                type属性：多选框为checkbox
                name属性：对多选框进行分组，name相同的是同一组
                value属性：value属性值会被提交给服务器
         -->
         爱好：  <input type="checkbox" name="hobby" value="lq"> 篮球
                <!-- 多选框中默认选中某个，需要添加checked="checked" -->
                <input type="checkbox" name="hobby" value="zq" checked="checked"> 足球
                <input type="checkbox" name="hobby" value="ymq"> 羽毛球
                <br><br>
        <!-- 
            创建下拉列表，使用select标签
                name属性要在select标签中指定
                value属性要在option标签中指定
                在select标签中添加multiple = "multiple"，则变成一个多选的下拉列表
         -->
        喜欢的书籍：
                <select name="book">
                    <!-- 
                        使用optgroup标签可以对下拉列表进行分组 
                        同一个optgroup的是同一组
                        label属性：指定分组的名字
                    -->
                    <optgroup label="四大名著">
                         <!-- 有几个下拉列表项就有几个option -->
                        <option value="xyj">西游记</option>
                        <!-- 下拉列表中默认选中某个，需要添加selected = "selected" -->
                        <option value="hlm" selected = "selected">红楼梦</option>
                        <option value="sg">三国演义</option>
                    </optgroup>

                    <optgroup label="外国名著">
                        <option value="bcsj">悲惨世界</option>
                        <option value="pi">飘</option>
                    </optgroup>
                </select>
                <br><br>
        <!-- 
            创建文本域textarea
         -->
        自我介绍：<textarea name="selfInfo" cols="30" rows="10"></textarea>
                <br><br>
        <!-- 
            创建提交按钮
                type属性：提交按钮为submit
                value属性：指定按钮的名字
         -->
        <input type="submit" value="注册">
        <!-- 
            创建重置按钮
                type属性：重置按钮为reset
                value属性：指按钮的名字
         -->
         <input type="reset" value="重置">
         <!-- 
            创建一个普通的按钮
          -->
          <input type="button" value="按钮">
          <br><br>
          <!-- 可以使用button标签创建上面的按钮，效果和上面的一样-->
          <button type="submit">提交</button>
          <button type="reset">重置</button>
          <button type="button">按钮</button>
    </form>
</body>
</html>